<template>
	<div class="ph-menu-group">
		<div class="ph-menu-group-title">
			<ph-icon v-if="icon" :icon="icon"/>
			{{title}}
			<ph-icon v-if="iconRight" :icon-right-fixed="true" :icon="iconRight"/>
		</div>
		<nav class="ph-menu ph-submenu">
            <slot></slot>
        </nav>
	</div>
</template>
<script lang="ts">
import { defineComponent, inject, provide } from 'vue'
import PhIcon from 'ph-icon'
import { TreeNode } from './struct'

export default defineComponent({
	components:{PhIcon},
	props:["title",'icon','icon-right'],
	setup(props){
		const getParentMenu = inject('getParentMenu') as ()=>TreeNode[]
		provide('getParentMenu',()=>{
            return [...getParentMenu(),{title:props.title,icon:props.icon}]
        })
	}
})
</script>

<style lang="scss">
@import './menu.scss';
	.ph-menu-group{
		position: relative;
		overflow:hidden;
		display: flex;
		flex-direction: column;
		.ph-menu-group-title{
			white-space: nowrap;
			position: relative;
			padding:var(--ph-menu-padding);
			height: var(--ph-menu-h);
			display: flex;
			align-items: center;
			color: var(--ph-menu-color);
			background-color: var(--ph-menu-bga);
			overflow: hidden;
			flex: 0 0 auto;
			padding-left: var(--ph-15);
			padding-right: var(--ph-15);
		}
	}
</style>